<template>
    <div class="container">
        <div class="sear-header">
            <div class="headeres">
                <div class="cancel">
                    <router-link tag="span" to="/home">X</router-link>
                    <h3>搜索你想要的车辆</h3>
                </div>
                <div class="input">
                    <input type="text" v-model="keyword" @input="search" placeholder="全部品牌/车型？">
                </div>
                <div class="input-bottom" v-show="keyword">
                    <ul>
                        <router-link tag="li" :to="'/page?id=' + item.carid" v-show="keyword"
                            v-for="(item, index) in resultList" :key="index">{{ item.carname }}</router-link>
                        <!-- <li>2222</li>
                    <li>2222</li> -->
                    </ul>
                    <h2 v-if="isShow">没有匹配到搜索结果</h2>
                </div>
            </div>
        </div>
        <div class="sear-main">
            <div class="searmain">
                <div class="title">
                    <router-link tag="div" :to="'/page?id=' + item.carid" class="item" v-for="item in resultList"
                        :key="item.carid">{{ item.carname }}</router-link>
                    <!-- <div class="item">奥迪 A6L</div>
                    <div class="item">奥迪 A6L</div>
                    <div class="item">奥迪 A6L</div> -->
                </div>
                <div class="hots">
                    <h5>热门搜索</h5>
                    <router-link tag="div" :to="'/page?id=' + item.carid" class="content" v-for="item in histroy"
                        :key="item.carid">{{ item.carname }}</router-link>

                </div>
                <button @click="del">清空</button>
            </div>
        </div>
    </div>
</template>

<script>
import { getLoveCar } from '@/api/lovecar'
export default {
    data() {
        return {
            
            keyword: "",
            histroy: [],//存放历史记录
            resultList: [],
            isShow: false
        }
    },

    methods: {
        //搜索
        search() {
            
            this.resultList = []
            if(this.keyword != ""){

                this.histroy.forEach((item) => {
                    if (item.carname.indexOf(this.keyword) != -1) {
                        this.resultList.push(item)
                        window.localStorage.setItem("search", JSON.stringify(this.resultList))
                    }
                })
            }
            if (this.resultList.length == 0) {
                this.isShow = true

            } else {
                this.isShow = false
            }
           



        },
        //获取输入框内容
      
        //清空
        del() {
            
            this.resultList = []
            localStorage.removeItem("search", JSON.stringify(this.resultList))
        }
    },
    created() {
        if (localStorage.search) {
            this.resultList = JSON.parse(localStorage.getItem("search"))
        }
        getLoveCar().then(data => {
            this.histroy = data.lovecar
        })
    },
}
</script>

<style lang="scss" scoped>
.sear-header {
    width: 100%;
    border-bottom: 1px solid #f4f4f4;

    .headeres {
        width: 90%;
        margin: 0 auto;
        position: relative;

        .cancel {
            margin-top: 15px;
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            span {
                font-size: 20px;
                margin-top: 5px;

            }
            h3{
                margin-left: 80px;
            }
        }

        .input {
            margin-bottom: 25px;

            input {
                font-size: 20px;
                border: none;
            }
        }

        .input-bottom {
            height: 500px;
            position: absolute;
            top: 112px;
            // bottom: -145px;
            width: 100%;
            background-color: #fff;
            z-index: 99;

            ul {
                width: 100%;
                // height: 255px;
                background-color: #fff;

                li {
                    width: 100%;
                    font-size: 15px;
                    font-weight: 600;
                    padding: 10px 0;
                    border-bottom: 1px solid #f5f5f5;
                    border-top: 1px solid #f5f5f5;
                }
            }

            h2 {
                width: 100%;
                background-color: #fff;
            }
        }
    }
}

.sear-main {
    width: 100%;

    .searmain {
        width: 90%;
        margin: 0 auto;
        position: relative;

        .title {

            .item {
                float: left;
                padding: 0 12px;
                background-color: #f5f5f5;
                font-size: 12px;
                color: #90888d;
                text-align: center;
                line-height: 33px;
                margin-right: 10px;
                margin-top: 10px;
            }
        }

        .hots {
            margin-top: 30px;
            float: left;

            .content {
                float: left;
                padding: 0 12px;
                background-color: #f5f5f5;
                font-size: 12px;
                color: #90888d;
                text-align: center;
                line-height: 33px;
                margin-right: 10px;
                margin-top: 10px;
            }
        }

        button {
            font-size: 12px;
            text-align: center;
            color: #90888d;
            background-color: #f5f5f5;
            border: none;
            position: absolute;
            top: 5px;
            right: 0px;
            border-radius: 20px;
            width: 35px;
            height: 20px;
        }
    }
}
</style>